﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ModulesPage.Master" AutoEventWireup="true" CodeBehind="RoomBooking.aspx.cs" Inherits="SwenAssignment3.RoomAvailabilityCumBookingModule.RoomBooking" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .content
        {
            height:450px;
            width:680px;
            clear:left;
        }
        /*Room Style*/
        .VacantRoom
        {
            background: url(/Pictures/AvailableRoom.png) no-repeat;
            height: 102px;
            width: 101px;
            float:left;
        }

            .VacantRoom:link
            {
                padding-top:25px;
                text-align:center;
            }

        .OccupiedRoom
        {
            background:url(/Pictures/NotAvailableRoom.png) no-repeat;
            height: 102px;
            width: 101px;
            float:left;
        }

            .OccupiedRoom:link
            {
                padding-top:25px;
                text-align:center;
            }


        .SFCRoom
        {
            background:url(/Pictures/SFCRoom.png) no-repeat;
            height: 102px;
            width: 101px;
            float:left;
        }

            .SFCRoom:link
            {
                padding-top:25px;
                text-align:center;
            }

        .ReservedRoom
        {
            background:url(/Pictures/ReservedRoom.png) no-repeat;
            height: 102px;
            width: 101px;
            float:left;
        }

            .ReservedRoom:link
            {
                padding-top:25px;
                text-align:center;
            }


        .SelectedRoom
        {
            background:url(/Pictures/SelectedRoom.png) no-repeat;
            height: 102px;
            width: 101px;
            float:left;
        }

            .SelectedRoom:link
            {
                color: red;
                padding-top:25px;
                text-align:center;
            }

        /*Button Panel*/
        #button1
        {
            float:left;
            height:130px;
            width:255px;
            background:url('/Pictures/RoomBookingDetails.png') no-repeat center;
        }
        #button2
        {
            margin: 0 0 0 210px;
            height:130px;
            width:255px;
            background:url('/Pictures/NSelectTheRoom.png') no-repeat center;
        }
        #button3
        {
            margin: 0 0 0 210px;
            height:130px;
            width:255px;
            background:url('/Pictures/NEnterGuestDetail.png') no-repeat center;
        }
        /*Table Style*/
        .auto-style1
        {
            color:white;
            width: 100%;
        }
        .auto-style2
        {
            width: 25%;
        }
        .style
        {
            text-align:right;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <!--Ajax Update Panel-->
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <!--Button Panel For the 3 buttons-->
            <div id="buttonPanel" runat="server">
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Pictures/RoomBookingDetails.png" Width="220px" OnClick="ImageButton1_Click" />
                <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Pictures/NSelectTheRoom.png" Width="220px" OnClick="ImageButton2_Click" />
                <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Pictures/NEnterGuestDetail.png" Width="220px" OnClick="ImageButton3_Click" />
            </div>
            <!--Multiview that are affected by the 3 Panel-->
            <asp:MultiView ID="MultiView1" ActiveViewIndex ="0" runat="server">
                <asp:View ID="View1" runat="server">

                        <table class="auto-style1">
                            <tr>
                                <td class="auto-style2">Number of Rooms:</td>
                                <td>
                                    <asp:DropDownList ID="ddlNoOfRooms" runat="server">
                                        <asp:ListItem Selected="True">1</asp:ListItem>
                                        <asp:ListItem>2</asp:ListItem>
                                        <asp:ListItem>3</asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td class="auto-style2">Type of Rooms:</td>
                                <td>
                                    <asp:CheckBoxList ID="cblRoomType" runat="server" ForeColor="White" RepeatDirection="Horizontal">
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td class="auto-style2">Smoking Rooms?:</td>
                                <td>
                                    <asp:RadioButtonList ID="rblSmoking" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem>Yes</asp:ListItem>
                                        <asp:ListItem>No</asp:ListItem>
                                    </asp:RadioButtonList>
                                </td>
                            </tr>
                            <tr>
                                <td class="auto-style2">Start Date:</td>
                                <td class="auto-style1">
                                    <asp:TextBox ID="tbxStartDate" runat="server">
                            
                        </asp:TextBox>
                                    <asp:CalendarExtender ID="tbxStartDate_CalendarExtender" runat="server" Enabled="True" TargetControlID="tbxStartDate">
                                    </asp:CalendarExtender>
                                    <asp:Label ID="lblDateStatus" runat="server" ForeColor="Red"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td  class="auto-style2">End Date:</td>
                                <td>
                                    <asp:TextBox ID="tbxEndDate" runat="server"></asp:TextBox>
                                    <asp:CalendarExtender ID="tbxEndDate_CalendarExtender" runat="server" Enabled="True" TargetControlID="tbxEndDate">
                                    </asp:CalendarExtender>
                                </td>
                            </tr>
                            <tr>
                                <td class="auto-style2">&nbsp;</td>
                                <td>
                                    <asp:Button ID="btnNext" runat="server" OnClick="btnNext_Click" Text="Next  &gt;&gt;" />
                                </td>
                            </tr>
                        </table>

                </asp:View>
                <asp:View ID="View2" runat="server">

                    <table class="auto-style1">
                        <tr>
                            <td>
                                <asp:DataList ID="dlRoomList" runat="server" CellSpacing="5" RepeatColumns="5" RepeatDirection="Horizontal" OnItemCommand="dlRoomList_ItemCommand" OnItemDataBound="dlRoomList_ItemDataBound">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="RoomButton" CssClass="VacantRoom" runat="server" Text='<%# Eval("RoomNo") %>' CommandName="RoomButtonClick"></asp:LinkButton>
                                        <asp:HiddenField ID="RoomStatus" runat="server" Value='<%# Eval("RoomStatus") %>' />
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                            <td class="style">
                                <asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/RoomMeaning.png" Width="130px" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>

                </asp:View>
                <asp:View ID="View3" runat="server">
                    
                    <table class="auto-style1">
                        <tr>
                            <td class="auto-style2">Guest ID:</td>
                            <td>
                                <asp:TextBox ID="tbxGuestID" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">First Name:</td>
                            <td>
                                <asp:TextBox ID="tbxFirstName" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">Last Name:</td>
                            <td>
                                <asp:TextBox ID="tbxLastName" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">Contact Number:</td>
                            <td>
                                <asp:TextBox ID="tbxContactNo" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">Email Address:</td>
                            <td>
                                <asp:TextBox ID="tbxEmail" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">Home Address:</td>
                            <td>
                                <asp:TextBox ID="tbxHomeAddr" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">Postal Code:</td>
                            <td>
                                <asp:TextBox ID="tbxPostal" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">Nationality:</td>
                            <td>
                                <asp:DropDownList ID="ddlCountry" runat="server">
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style2">&nbsp;</td>
                            <td>
                                <asp:Button ID="btnNext2" runat="server" Text="Proceed To Payment" OnClick="btnNext2_Click" />
                                <asp:ConfirmButtonExtender ID="btnNext2_ConfirmButtonExtender" runat="server" ConfirmText="Are you sure you want to proceed to the next page?" Enabled="True" TargetControlID="btnNext2">
                                </asp:ConfirmButtonExtender>
                            </td>
                        </tr>
                    </table>

                </asp:View>
            </asp:MultiView>
            <!--End of Multiview-->
        </ContentTemplate>
    </asp:UpdatePanel>
    <!--End of Update Panel-->
</asp:Content>
